<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>转换</title>
			<style>
					.box{
						/* 盒子摆在body的正中间 */
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						width: 300px;
						height: 300px;
						background-color: brown;
						/* transform: translatex(-50px) translatey(200px); */
						/* 右和下都是正数；左和上都是负数 */
					}
					.box1{
						width: 200px;
						height: 200px;
						background-color: cornflowerblue;
						margin: 50px auto;
						transition: all 3s linear;
						/* transform-origin: 转换的中心 
						方位词：水平方向（left,center,right）  垂直方向（top,center,bottom）
						*/
						transform-origin:50% 50%;
					}
					
					.box1:hover{
						/* scale()：缩放 */
						/* rotate（）： 旋转deg度 :正数顺时针，负数逆时针*/
						/* skew():倾斜 deg"x轴和y轴都可以" */
						transform: skew(2,.5);
						/* transform: scale(0.5); */
						/* transform: scaleY(); */
						/* "-"盒子会变么了然后又变大又缩放 */
					}
				</style>
			</head>
			<body>
				<div class="box"></div>
				<div class="box1"></div>
	</body>
</html>
